import { onMounted, onUnmounted, ref } from 'vue'
import * as echarts from 'echarts'
import { api } from '@/api'
import { LogDao } from '@/api/interface'
import { getUserFromStore } from '@/common/useStore'
import { debounce } from '@/utils'
const { RequestProductList, RequestLogList, RequestNoticeList } = api
/**
 * 首页-看板
 */
export const useHome = () => {
	const activeName = ref<string>('caiping')
	let watchChartWc: any = null
	//实例化websockt
	let baseURL = import.meta.env.VITE_APP_BASE
	let wsUrl = baseURL.replace('http', 'ws')
	const ws = new WebSocket(wsUrl)
	
	onMounted(() => {
		drawHotCai()
	})

	onUnmounted(() => {
		ws.send('close')
		// dom节点在卸载时已经为空了
		// watchChartWc && watchChartWc.unobserve(document.getElementById('drawHotCai'))
	})

	const handleClick = (value: any) => {
		activeName.value = value.paneName
		switch (value.paneName) {
			case 'caiping':
				drawHotCai() // websockt实时更新热门菜品信息
				break
			case 'hotEvent':
				initMyPie()
				break
			case 'hotPrice':
				drawHotProduct()
				break
		}
	}
	/**
	 * 实时热门菜品
	 *  描述需求
	 *   - 使用websockt技术实时获取热门菜品数据，
	 *   - 使用echarts图表库柱状图显示
	 */
	const drawHotCai = () => {
		// 基于准备好的dom，初始化echarts实例
		const myChart = echarts.init(document.getElementById('drawHotCai') as HTMLElement)
		myChart.showLoading() // 显示loading

		ws.addEventListener('open', () => {
			console.log('建立websocket连接')
			ws.send('start') // 发送消息
		})
		ws.addEventListener('close', () => {
			console.log('断开websockt连接')
		})

		const options = getHotCaiPingOption()
		ws.addEventListener('message', evt => {
			myChart.hideLoading() // 隐藏loading

			const list = JSON.parse(evt.data)
			let names = list.map((item: any) => item.name) // 名称
			options.xAxis.data = names
			let prices = list.map((item: any) => item.price) // 价格
			options.series[0].data = prices
			let nums = list.map((item: any) => item.num) //数量
			options.series[1].data = nums

			myChart.setOption(options)
		})

		// 监听尺寸变化
		watchChartWc = new ResizeObserver(
			debounce(() => {
				// debounce(() => {
				// 	myChart.resize()
				// 	console.log('尺寸变化>1111>>>>>')
				// }, 500)

				myChart.resize()
				console.log('尺寸变化>1111>>>>>')
			}, 300)
		)

		// 使用observe开启监听, onObserve可以取消监听
		watchChartWc.observe(<HTMLElement>document.getElementById('drawHotCai'))
	}
	/**
	 * 实时菜品option
	 */
	const getHotCaiPingOption = () => {
		const option = {
			title: {
				text: '实时菜品'
			},
			//图例
			legend: {
				data: ['价格', '数量']
			},
			axisLabel: {
				//这个是倾斜角度，也是考虑到文字过多的时候，方式覆盖采用倾斜
				rotate: 30,

				//这里是考虑到x轴文件过多的时候设置的，如果文字太多，默认是间隔显示，设置为0，
				//表示全部显示，当然，如果x轴都不显示，那也就没有意义了
				interval: 0
			},
			// 鼠标移入显示具体内容
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'cross',
					crossStyle: {
						color: '#999'
					}
				}
			},
			//工具条
			toolbox: {
				feature: {
					dataView: { show: true, readOnly: false }, // 数据表格
					magicType: { show: true, type: ['line', 'bar'] }, // 切换图型
					restore: { show: true }, // 刷新
					saveAsImage: { show: true } // 保存图片
				}
			},
			// 横坐标
			xAxis: {
				data: [],
				axisPointer: {
					type: 'shadow'
				}
			},
			yAxis: [
				{
					type: 'value',
					name: '价格',
					min: 0,
					max: 250,
					interval: 50,
					axisLabel: {
						formatter: '{value}￥'
					}
				},
				{
					type: 'value',
					name: '数量',
					min: 0,
					max: 200,
					interval: 40,
					axisLabel: {
						formatter: '{value}个'
					}
				}
			],
			series: [
				{
					name: '价格',
					type: 'bar',
					data: [],
					itemStyle: {
						normal: {
							//以下为是否显示，显示位置和显示格式的设置了
							label: {
								show: true,
								position: 'top',
								formatter: '价格:{c}'
								// formatter: '{b}\n{c}',
							}
						}
					},
					// 提示内容过滤
					tooltip: {
						valueFormatter: function (value: any) {
							return value + ' ￥'
						}
					}
				},
				{
					name: '数量',
					type: 'bar',
					data: [],
					//设置柱的宽度，要是数据太少，柱子太宽不美观~
					// barWidth: 50,
					itemStyle: {
						normal: {
							color: function (params: any) {
								// build a color map as your need.
								const colorList = [
									'#C1232B',
									'#B5C334',
									'#FCCE10',
									'#E87C25',
									'#27727B',
									'#FE8463',
									'#9BCA63',
									'#FAD860',
									'#F3A43B',
									'#60C0DD',
									'#D7504B',
									'#C6E579',
									'#F4E001',
									'#F0805A',
									'#26C0C0'
								]
								return colorList[params.dataIndex]
							},
							//以下为是否显示，显示位置和显示格式的设置了
							label: {
								show: true,
								position: 'top',
								formatter: '数量:{c}'
								// formatter: '{b}\n{c}',
							}
						}
					},
					showBackground: true,
					backgroundStyle: {
						color: 'rgba(111, 162, 135, 0.2)'
					},
					tooltip: {
						valueFormatter: function (value: any) {
							return value + ' n'
						}
					}
				}
			]
		}
		return option
	}
	/**
	 * 热门商品
	 */
	const drawHotProduct = async () => {
		const myChart = echarts.init(document.getElementById('drawHotProduct') as HTMLElement)
		// 基于准备好的dom，初始化echarts实例
		const data = await RequestProductList({}) //获取热门商品数据
		const { resultCode, resultInfo } = data
		let productLists: any = []
		let oldPrices: any = []
		let prices: any = []
		if (resultCode === 1) {
			const list = resultInfo.list
			list.forEach((item: any) => {
				productLists.push(item.product)
				oldPrices.push(item.oldprice)
				prices.push(item.price)
			})
			// 绘制图表
			myChart.setOption({
				title: {
					text: '热门商品'
				},
				legend: { data: ['原价', '现价'] },
				tooltip: {},
				xAxis: {
					data: productLists,
					axisLabel: {
						//这个是倾斜角度，也是考虑到文字过多的时候，方式覆盖采用倾斜
						rotate: 30,
						//这里是考虑到x轴文件过多的时候设置的，如果文字太多，默认是间隔显示，设置为0，
						interval: 0
					}
				},
				//工具条
				toolbox: {
					feature: {
						// dataView: { show: true, readOnly: false }, // 数据表格
						magicType: { show: true, type: ['line', 'bar'] } // 切换图型
						// restore: { show: true }, // 刷新
						// saveAsImage: { show: true } // 保存图片
					}
				},
				yAxis: {},
				series: [
					{
						name: '原价',
						type: 'line',
						data: oldPrices
					},
					{
						name: '现价',
						type: 'line',
						data: prices
					}
				]
			})
		}
	}

	/**
	 * 热门新闻
	 */
	const initMyPie = () => {
		const myEcharts = echarts.init(document.getElementById('mypie') as HTMLElement)
		const option = {
			series: [
				{
					type: 'pie', // 类型
					data: [
						{
							value: 350,
							name: 'NBA'
						},
						{
							value: 550,
							name: '新闻'
						},
						{
							value: 890,
							name: 'CBA'
						},
						{
							value: 680,
							name: '体育'
						}
					]
				}
			]
		}
		myEcharts.setOption(option)
	}

	return { activeName, handleClick }
}
/**
 * 日志消息
 */
export const useMessage = () => {
	const account = getUserFromStore()
	const logList = ref<LogDao.ILog[]>() // 日志列表
	const notice = ref<string>('') // 公告
	/**
	 * 日志列表
	 */
	const getLogList = async () => {
		const data = await RequestLogList<LogDao.IData<LogDao.ILog>>(account.nick, 1, 10)
		const { resultCode, resultInfo } = data
		if (resultCode === 1) {
			logList.value = resultInfo.list
		}
	}
	/**
	 * 公告列表
	 */
	const getNoticeList = async () => {
		const data = await RequestNoticeList<LogDao.IData<LogDao.INotice>>({})
		const { resultCode, resultInfo } = data
		if (resultCode === 1) {
			if (resultInfo.list.length > 0) {
				notice.value = resultInfo.list[0].content
			}
		}
	}

	onMounted(() => {
		getLogList()
		getNoticeList()
	})

	return { logList, notice }
}
